<template>
  <div class="person-box">
    <cardPanel title="人员概况">
      <ul class="person-content">
        <li v-for="(item, index) in personList" :key="index">
          <div class="person-item-left">
            <img :src="item.icon" />
          </div>
          <div class="person-item-right">
            <label>{{ item.label }}</label>
            <p>
              <span>{{ item.num }}</span
              >{{ item.unit }}
            </p>
          </div>
        </li>
      </ul>
    </cardPanel>
  </div>
</template>

<script setup lang="ts">
// 人员概况
import { ref, watch, onUnmounted } from "vue";
import cardPanel from "@/components/cardPanel/index.vue";
import person1 from "@/assets/image/overview/person1.png";
import person2 from "@/assets/image/overview/person2.png";
import person3 from "@/assets/image/overview/person3.png";
import areaData from "@/assets/json/area.json";
import { overviewStore } from "@/stores/overview";

const store = overviewStore();

const personList = ref([
  {
    label: "总户数",
    num: 0,
    unit: "户",
    icon: person1,
  },
  {
    label: "总人数",
    num: 0,
    unit: "人",
    icon: person2,
  },
  {
    label: "党员数量",
    num: 0,
    unit: "人",
    icon: person3,
  },
  {
    label: "退役军人",
    num: 0,
    unit: "人",
    icon: person3,
  },
]);

watch(
  () => store.overviewType,
  (val: any) => {
    if (val === "") {
      const { features } = areaData;
      const allDetail: any = {
        总户数: 0,
        总人数: 0,
        党员数量: 0,
        退役军人: 0,
      };
      features.forEach((item: any) => {
        const { properties } = item;
        const { attr } = properties;
        const info = attr["社区概况"];
        allDetail["总户数"] += Number(
          info["总户数"].substring(0, info["总户数"].length - 1)
        );
        allDetail["总人数"] += Number(
          info["总人数"].substring(0, info["总人数"].length - 1)
        );
        allDetail["党员数量"] += Number(
          info["党员数量"].substring(0, info["党员数量"].length - 1)
        );
        allDetail["退役军人"] += Number(
          info["退役军人"].substring(0, info["退役军人"].length - 1)
        );
      });

      personList.value.forEach((item: any) => {
        item.num = allDetail[item.label];
      });
    }
  },
  {
    immediate: true,
  }
);

watch(
  () => store.overviewData,
  (val: any) => {
    personList.value.forEach((item: any) => {
      item.num = Number(val[item.label].substring(0, val[item.label].length - 1));
    });
  },
  {
    deep: true,
  }
);

onUnmounted(() => {
  store.overviewType = '';
  store.overviewData = {};
})
</script>

<style lang="scss" scoped>
.person-box {
  width: 360px;
  height: 28%;
  margin-bottom: 10px;
}
.person-content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  li {
    width: 47%;
    height: 60px;
    background-color: #24c9ff1a;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.person-item-left {
  width: 44px;
  height: 44px;
  margin-right: 26px;
  display: flex;
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
.person-item-right {
  display: flex;
  flex-direction: column;
  label {
    position: relative;
    &::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 2px;
      background: linear-gradient(0deg, #ff9407b3, #ff940700);
      bottom: -2px;
    }
  }
  p {
    margin-top: 4px;
    span {
      font-family: Alibaba PuHuiTi, serif;
      font-style: normal;
      font-weight: 700;
      font-size: 16px;
      color: #47e8fe;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}
</style>
